<template>
    <div>
        <van-nav-bar title="上报单" left-text="" left-arrow @click-left="$router.push('/home/home')" fixed />
        <van-cell v-for="item in list" :key="item" :title="item" />

        <div class="block"></div>
        <van-tabs v-model:active="active">
            <van-tab title="我的提醒">
                <div class="order" v-for="(item, index) in dataSource.raised" :key="index">
                    <div class="userinifo">
                        <head-img :src="`${URL}${userStore.userInfo.avatar}`" size="80px"></head-img>
                        <p>{{ userStore.userInfo.username }}</p>
                    </div>
                    <div class="ord">
                        <ul>
                            <li>{{ item.id }}</li>
                            <li>{{ item.licenseplate }}</li>
                            <li>{{ item.report_time }}</li>
                            <li>{{ item.report_reason }}</li>
                            <img :src="`${URL}${item.report_image}`" alt="">
                        </ul>
                    </div>

                    <van-button :disabled="onclick2.value" type="primary" @click="konw1(item.id)">{{ text1
                        }}</van-button>
                </div>
            </van-tab>
            <van-tab title="我的上报">
                <div class="order" v-for="(item, index) in dataSource.getReport" :key="index">
                    <div class="userinifo">
                        <head-img :src="`${URL}${userStore.userInfo.avatar}`" size="80px"></head-img>
                        <p>{{ userStore.userInfo.username }}</p>
                    </div>
                    <div class="ord">
                        <ul>
                            <li>{{ item.id }}</li>
                            <li>{{ item.licenseplate }}</li>
                            <li>{{ item.report_time }}</li>
                            <li>{{ item.report_reason }}</li>
                            <li>{{ item.is_contacted == 0 ? "待解决" : "已解决" }}</li>
                            <img :src="`${URL}${item.report_image}`" alt="">
                        </ul>
                    </div>

                    <van-button :disabled="onclick1.value" type="primary" @click="konw2(item.id)">{{ text2
                        }}</van-button>
                </div>
            </van-tab>
        </van-tabs>



        <div class="block"></div>

        <van-tabbar v-model="active" route>
            <van-tabbar-item icon="wap-home" replace to="/home/home">主页</van-tabbar-item>
            <van-tabbar-item icon="comment" replace to="/message/contactrelist" dot>消息</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart" replace to="/shop/shop">商店</van-tabbar-item>
            <van-tabbar-item icon="friends" replace to="/user/userinfo">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
// 导入依赖
import { POST, GET } from "../../tools/fetch";
import { userApi, postApi, reportApi, baseURL } from '../../tools/api.js';
// 路由相关的，允许你用js控制路由，跳转组件一点就的走，但是此时控制了，不是直接点了就跳转，需要js控制允许控制转向其他路由
//  控制路由（走的时候）访问路由（来的时候）
// import {useRouter,useRoute} from 'vue-router';
import { useRouter } from 'vue-router';
const router = useRouter();
// token
import { useUserStore } from '../../tools/storage.js';
// 初始化
const userStore = useUserStore();
import { createApp } from 'vue';
import { Tab, Tabs } from 'vant';
import { ref } from "vue";
import { flat } from "vant/lib/utils/basic.js";

const URL = baseURL;

const dataSource = ref({
    raised: [],
    getReport:[],
    list: []

})

// 接收被处理人
let onclick1 = ref(false); // 初始化为false，禁用第二个按钮
let onclick2 = ref(true); // 初始化为true，启用第一个按钮
let text1 = ref('未知晓');
let text2 = ref('正在处理');

const konw1 = async (id) => {
    text1.value = '已知晓';
    await GET({
        api: reportApi.dispose,
        data: { id }
    });
    onclick2.value = false; // 第一个按钮点击后禁用
    onclick1.value = true; // 允许第二个按钮点击
};

const konw2 = async (id) => {
    text2.value = '已完成';
    await GET({
        api: reportApi.finish,
        data: { id }
    });
};

// 监听 dataSource.list 中的每个 item.is_contacted 的变化
watch(() => dataSource.value.list, (newList) => {
    newList.forEach(item => {
        watch(
            () => item.is_contacted,
            (newVal) => {
                if (newVal !== 0) { // 当值改变时
                    onclick1.value = false; // 禁用第二个按钮
                }
            }
        );
    });
}, { immediate: true }); // 立即执行一次


// 页面加载时调用
const onLoad = async () => {
    const resResult = await GET({
        api: reportApi.getReport,
    })
    console.log(resResult);
    dataSource.value.getReport = resResult.data;

    const resResult1 = await GET({
        api: reportApi.getmyRepored
    })
    dataSource.value.raised = resResult1.data;
}
onLoad()

</script>

<style lang="less" scoped>
.block {
    height: 7vh;
}

.order {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;


    background-color: @--base-white;
    border-radius: 10px;
    border: 4px solid #ffffff;
    box-shadow: 0px 0px 5px 2px#919191;

    .userinifo {
        margin-top: 5vw;
    }

    .ord {
        margin-top: 5vw;

        img {
            width: 20px;
            height: 20px;
        }
    }
}
</style>